<template>
  <div class="lottory-with-icon button-unselected">
    <div class="box-inner">
      <div class="left">
        <span class="icon">
          <i class="iconfont" :class="number.icon"></i>
        </span>
      </div>
      <div class="center">
        <span class="context">{{number.number}}</span>
        <span class="parameter">{{number.parameter[activeSwitchIndex].number}}</span>
      </div>
      <div class="right">
        <div class="balls">
          <span 
            :key="index"
            class="ball"
            :class="addClass(num)"
            v-for="(num, index) in number.numbers.split(',')">
            {{num}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let red = [1, 2, 3, 4, 5, 6, 7, 8, 9 ,10, 11, 12, 13, 14, 15, 16]
let green = [17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33]
let blue = [34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]
export default {
  props: {
    number: {
      type: Object
    },
    activeSwitchIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
     
    }
  },
  methods: {
    addClass(num) {
      let className = red.indexOf(parseInt(num)) > -1 ? 'red' 
        : green.indexOf(parseInt(num)) > -1 ? 'green'
        : blue.indexOf(parseInt(num)) > -1 ? 'blue'
        : 'default'
      return className
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .lottory-with-icon
    box-sizing border-box 
    padding 8px 10px
    cursor pointer
    .box-inner 
      display flex 
      align-items center
      height 32px
      .right 
        .balls 
          display flex
          .ball 
            width 20px
            height 20px 
            font-size 13px
            font-family ArialMT
            color #fff
            border-radius 50%
            text-align center
            line-height 20px
            box-sizing border-box 
            margin-right 5px
            &.red 
              background $color-ball-red
            &.green 
              background $color-ball-green 
            &.blue 
              background $color-ball-blue
      .left 
        .icon 
          display inline-block 
          width 20px 
          height 24px 
          margin-right 10px 
          text-align center
          .iconfont 
            font-size 24px
            background-image: -webkit-linear-gradient(-15deg,rgba(210,152,26,1),rgba(243,211,105,1));
            -webkit-background-clip text
            -webkit-text-fill-color transparent
      .center 
        display flex
        flex-direction column
        margin-right 20px
        width 30px
        align-items center
        .parameter 
          margin-top 5px
          color $color-theme-red
           
</style>